<template>
  <a-modal
    style="width: 50%"
    :title="titleMap[mode]"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :destroyOnClose="true"
    @cancel="handleCancel"
    :maskClosable="false">
    <div style="margin-top: 12px;">
      <a-form-model ref="ruleAddForm" :model="addForm" :rules="addRules">
        <a-form-model-item label="门店名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="storeId">
          <a-select placeholder="请选择门店" v-model="addForm.storeId">
            <a-select-option :value="item.storeId" v-for="(item, index) in storeList" :key="index">{{
              item.storeName
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="预算项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectId">
          <selectProject @input="onInput" style="width: 100%;" ref="selectProject"></selectProject>
        </a-form-model-item>
        <a-form-model-item label="预测模型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="model">
          <!-- <a-input placeholder="请输入预测模型" v-model.trim="addForm.model" /> -->
          <a-select placeholder="请选择预测模型" v-model="addForm.model" :allow-clear="true">
            <a-select-option :value="item.itemValue" v-for="(item, index) in modelList" :key="index">{{
              item.itemText
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="周期类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="periodType">
          <a-select placeholder="请选择周期类型" v-model="addForm.periodType" :allow-clear="true" style="width: 100%;">
            <a-select-option :value="item.id" v-for="(item, index) in typeList" :key="index">{{
              item.name
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入备注" v-model.trim="addForm.description" />
        </a-form-model-item>
      </a-form-model>
    </div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
      <a-button type="primary" :visible="visibleBtn" :loading="loadingBtn" @click="handleOk">
        保存
      </a-button>
    </template>
  </a-modal>
</template>
<script>

import { addModel } from '@/api/analyse'
import { getStores } from '@/api/stores'
import { getAppointDicts, detailDicts } from '@/api/base'
import selectProject from './selectProject'
export default {
    components: { selectProject },
    data () {
        return {
            addRules: {
                storeId: [
                    { required: true, message: '请选择门店名称!', trigger: 'change' }
                ],
                projectId: [
                    { required: true, message: '请选择预算项目!', trigger: 'change' }
                ],
                model: [
                    { required: true, message: '请输入预测模型!', trigger: 'change' }
                ]
            },
            addForm: {
                storeId: undefined,
                projectId: undefined,
                model: undefined,
                periodType: undefined,
                description: ''
            },
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            typeList: [{ id: 2, name: '月' }, { id: 3, name: '日' }],
            visible: false,
            confirmLoading: false,
            loading: false,
            visibleBtn: false,
            loadingBtn: false,
            mode: 'add',
            titleMap: {
                add: '新增',
                edit: '编辑'
            },
            rowData: '',
            storeList: [],
            modelList: []
        }
    },
    mounted () {

    },
    methods: {
        apiAll () {
            getStores({ storeName: '' }).then(res => {
                if (res.code == 200) {
                    this.storeList = res.data
                }
            })
            getAppointDicts('forecasting_model').then(res => {
                const _this = this
                if (res.code == 200) {
                    const data = res.data.datas
                    if (data.length > 0) {
                        detailDicts(data[0].dictId).then(r => {
                            if (r.code == 200) {
                                _this.modelList = r.data.items
                            }
                        })
                    }
                }
            })
        },
        // 选择预算项目
        onInput (e) {
            this.addForm.projectId = e
        },
        // 显示
        open (mode = 'add', row) {
            this.mode = mode
            this.visible = true
            if (this.mode == 'edit') {
                this.rowData = row
                this.$nextTick(() => {
                    this.$refs.selectProject.init({ projectId: row.projectId })
                })
                this.addForm = row
            }
            this.apiAll()
        },
        // 关闭
        handleCancel () {
            this.visible = false
            this.loadingBtn = false
            this.visibleBtn = false
            this.$emit('close')
        },
        // 确认
        handleOk () {
            this.loadingBtn = true
            this.visibleBtn = true
            this.$refs.ruleAddForm.validate(valid => {
                if (valid) {
                    // const Api = this.mode == 'add' ? addStores : editStores
                    addModel(this.addForm).then(res => {
                        if (res.code === 200) {
                            this.$notification['success']({
                                message: '提示',
                                description: '保存成功！',
                                duration: 8
                            })
                            this.visible = false
                            this.$emit('success')
                        } else {
                            this.$notification['error']({
                                message: '提示',
                                description: res.message,
                                duration: 8
                            })
                        }
                        this.visibleBtn = false
                        this.loadingBtn = false
                    })
                } else {
                    this.loadingBtn = false
                    this.visibleBtn = false
                    return false
                }
            })
        }
    }
}
</script>
<style scoped lang="less" ></style>
